<template>
  <div class="primary-grid">
    <div class="item item1">
      <h1>生命如歌</h1>
      <el-divider></el-divider>
      <el-image style="width: 400px; height: 50%" :src="require('@/assets/logo/page.jpg')"></el-image>
    </div>
    <div class="item item2 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">员工总数</div>
      <div class="smoll3">{{faculty.userSum}}</div>
    </div>
    <div class="item item3 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">状态正常</div>
      <div class="smoll3">{{ faculty.checkinNormal }}</div>
    </div>
    <div class="item item4 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">状态异常</div>
      <div class="smoll3">{{ faculty.checkinUnusual }}</div>
    </div>
    <div class="item item5 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">今日迟到</div>
      <div class="smoll3">{{faculty.checkinLeave}}</div>
    </div>
    <div class="item item6 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">今日早退</div>
      <div class="smoll3">{{ faculty.checkinOut }}</div>
    </div>
    <div class="item item7 vice-grid">
      <div class="smoll1"></div>
      <div class="smoll2">今日矿工</div>
      <div class="smoll3">{{ faculty.checkinAbsent }}</div>
    </div>
    <div class="item item8">
      <div ref="echartsContainer" style="width: 100%; height: 200px;"></div>
    </div>
    <div class="item item9">
      <el-calendar v-model="value" >
      </el-calendar>
    </div>
    <div class="item item10">
      <div ref="echartsContainer2" style="width: 100%; height: 250px;margin: auto"></div>
    </div>
    <div class="item item11">
      <div ref="echartsContainer3" style="width: 100%; height: 100%;margin: auto"></div>
    </div>
  </div>
</template>

<script>
import { homePage } from "@/api/home";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      value: new Date(),
      // url: "../../../assets/logo/生命.jpg"
      url: "C:/Users/JYW/Desktop/图片/page.jpg",
      faculty:{}
    }
  },
  mounted() {
    this.insuranceChart();
    this.recruitChart();
    this.departmentChart();
  },
  created() {
    this.getHomePage();
  },
  methods:{
    getHomePage() {
      this.loading = true;
      homePage().then(response => {
        console.log(response)
        this.faculty = response.data;
      });
    },
    /*保险折线图*/
    insuranceChart() {
      // 初始化 ECharts 实例
      const myChart = echarts.init(this.$refs.echartsContainer);

      // 在方法内定义 option
      const option = {
        title: {
          text: "部分城市社保缴费比例"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["养老保险", "医疗保险", "失业保险", "生育保险"]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['成都', '重庆', '北京', '上海', '天津', '深圳', '广州']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '养老保险',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '医疗保险',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '失业保险',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '生育保险',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      };

      // 设置图表配置
      myChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    /*公司新人图*/
    recruitChart(){
      // 初始化 ECharts 实例
      const myChart = echarts.init(this.$refs.echartsContainer2);
     const option = {
       title:{
         text:"2024员工入职情况"
       },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      // 设置图表配置
      myChart.setOption(option);
      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    /*部门人数图*/
    departmentChart() {
      // 初始化 ECharts 实例
      const myChart = echarts.init(this.$refs.echartsContainer3);
      const option = {
        title: {
          text: '员工分布情况',
          left: '150',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 0,
          top: 20,
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '员工分布',
            type: 'pie',
            radius: [20, 100],
            center: ['40%', '60%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 40, name: 'rose1' },
              { value: 33, name: 'rose2' },
              { value: 28, name: 'rose3' },
              { value: 22, name: 'rose4' },
              { value: 20, name: 'rose5' },
              { value: 15, name: 'rose6' },
              { value: 12, name: 'rose7' },
              { value: 10, name: 'rose8' }
            ]
          },
        ]
      };

      // 设置图表配置
      myChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }

  },
  beforeDestroy() {
    // 移除窗口大小变化的监听器，防止内存泄漏
    window.removeEventListener('resize', this.insuranceChart);
  }
};
</script>

<style >
/*body{*/
/*  background-color: rgba(237, 237, 243, 0.78);*/
/*}*/
.primary-grid{
  display: grid;
  grid-template-columns: repeat(9,1fr);
  grid-template-rows: repeat(6,100px);
  gap: 10px;
  background-color: rgba(237, 237, 243, 0.78);
}
.item{
  background-color: white;
}
.item1{
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  line-height: 100px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.item2{
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item3{
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item4{
  grid-column-start: 8;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item5{
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item6{
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item7{
  grid-column-start: 8;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item8{
  background-color: white;
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 5;
}

.item9{
  background-color: skyblue;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 7;
}

.item10{
  background-color: white;
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 7;
}

.item11{
  background-color: white;
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 7;
  text-align: center;
}

.vice-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(3,33.3%);
  /*gap: 1px;*/
  column-gap: 20px;
}

.smoll1{
  background-color: skyblue;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}

.smoll2{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  text-align: left;
  line-height: 40px;
}

.smoll3{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
  line-height: 50px;
  font-size: 30px;
}

/*.custom-calendar {*/
/*  width: 300px; !* 设置宽度，可以使用 px、em、rem 或百分比等单位 *!*/
/*  height: 300px; !* 设置高度，可以使用 px、em、rem 或百分比等单位 *!*/
/*}*/
</style>
